<template>
  <div class="cb-main-container">
    <div class="main-content">
      <div class="operation-box">
        <el-button icon="plus" type="primary" @click="add">新增</el-button>
      </div>
      <div class="table-box">
        <el-table :data="tableConfig.data" :size="tableConfig.size" row-key="id" :empty-text="tableConfig.emptyText">
          <el-table-column type="index" width="50" />
          <el-table-column property="name" label="名称"/>
          <el-table-column label="状态">
            <template #default="scope">
              <el-tag :type="(scope.row.target.status === 1) ? 'primary' : 'info'">{{ scope.row.target.status === 1 ? '启用' : '禁用' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="right">
            <template #default="scope">
              <el-button link type="primary" icon="plus" @click="onAddSub(scope.row)">新增</el-button>
              <el-button link type="primary" icon="edit" @click="onEdit(scope.row)">编辑</el-button>
              <el-button link type="danger" icon="delete" @click="onDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

  <!-- 添加/编辑 -->
  <el-dialog v-model="dialogConfig.visible" :title="dialogConfig.title" :width="dialogConfig.width" @close="dialogCloseHandle">
    <el-form ref="formRef" :model="formConfig.model" :label-width="formConfig.labelWidth" :rules="formConfig.rules">
      <el-form-item label="所属分类" prop="pid">
        <el-tree-select
            :check-strictly=true
            node-key="id"
            v-model="formConfig.model.pid"
            :data="formConfig.treeSelectData"
            :props="formConfig.treeSelectProps">
        </el-tree-select>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="formConfig.model.name" autocomplete="off" placeholder="请填入分类名称" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
          <el-select v-model="formConfig.model.status" placeholder="请选择状态" style="width: 168px">
            <el-option v-for="(item, index) in statusEnum" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input type="textarea" :rows="6" v-model="formConfig.model.remarks" placeholder="请输入备注信息" show-word-limit maxlength="500" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogConfig.visible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue"
import { categoryAdd, categoryUpdate, treeCategory, categoryDeleteById } from '@/api/erp/product.js'
import { clear } from '@/util/ObjectUtil.js'
import {ElMessageBox} from "element-plus";

defineOptions({
  name: '/erp/productManagement/category'
})

const formRef = ref(null)
const formConfig = reactive({
  labelWidth: 68,
  model: {
    id: '',
    pid: 0,
    name: '',
    status: 1,
    remarks: ''
  },
  rules: {
    name: [
      {required: true, message: '名称不能为空', trigger: 'blur'}
    ]
  },
  treeSelectData: [],
  treeSelectProps: {
    label: 'name',
  }
})

const statusEnum = [
  {label: '禁用', value: 0},
  {label: '启用', value: 1}
]

const tableConfig = reactive({
  data: [
    {id: 1, name: '分类1', target: {status: 1, remarks: '测试'}, children: [
        {id: 11, name: '分类11', target:{ status: 1, remarks: '测试'}}
      ]},
    {id: 2, name: '分类2', target: {status: 1,  remarks: '测试'}}
  ],
  emptyText: '暂无数据',
  size: 'large'
})

const dialogConfig = reactive({
  visible: false,
  title: '新增',
  width: 500
})

const dialogCloseHandle = () => {
  if (!formRef.value) return
  formRef.value.resetFields()

  clear(formConfig.model)
}

const add = () => {
  dialogConfig.visible = true
}

const onAddSub = (rowData) => {
  formConfig.model.pid = rowData.id
  dialogConfig.visible = true
}

const onEdit = async (rowData) => {
  const resp = await treeCategory()
  formConfig.treeSelectData = [{id: '0', name: '根节点', children: resp.data} ]

  formConfig.model = {...rowData.target}
  dialogConfig.visible = true
}

const onDelete = (rowData) => {
  ElMessageBox.confirm('确定要删除当前数据吗?', '提示', {
    cancelButtonText: '取消',
    confirmButtonText: '确定'
  }).then(() => {
    categoryDeleteById(rowData.id).then(() => {
      requestCategoryTree()
    })
  })
}

const onSubmit = async () => {
  const valid = await formRef.value.validate()
  if (valid) {
    if (formConfig.model.id) {
      await categoryUpdate(formConfig.model)
    } else {
      await categoryAdd(formConfig.model)
    }
    await requestCategoryTree()
    dialogConfig.visible = false
  }
}

const requestCategoryTree = () => {
  treeCategory().then(resp => {
    tableConfig.data = resp.data
  })
}

onMounted(() => {
  requestCategoryTree()
})
</script>

<style scoped lang="scss">
.cb-main-container {
  display: flex;
  flex-direction: column;

  .search-box {
    @include containerStyle;
    padding-bottom: 0;
  }

  .main-content {
    flex: 2;
    @include containerStyle;
    overflow: auto;

    display: flex;
    flex-direction: column;

    .table-box {
      flex: 2;
      margin-bottom: $cb_margin-value;
    }
  }
}
</style>
